<template>
    <div>
         <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>评论设置</el-breadcrumb-item>
      <el-breadcrumb-item>评论列表</el-breadcrumb-item>
    </el-breadcrumb>

     <!-- 卡片视图区域 -->
    <el-card>

      <!-- 用户列表区域 -->
      <el-table :data="userlist" border stripe>
        <el-table-column align="center" type="index"></el-table-column>
        <el-table-column label="头像" align="center">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.img" 
              :preview-src-list="[scope.row.img]"
              @click="vbs(scope.row.img)"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column align="center" label="昵称" prop="xingming"></el-table-column>
        <el-table-column align="center" label="用户手机" prop="tel"></el-table-column>
        
        <el-table-column align="center" label="评论" prop="chat"></el-table-column>
        <el-table-column align="center" label="时间" prop="shijian"></el-table-column>
        <el-table-column label="操作" width="150px">
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <!-- <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row)"></el-button> -->
            <!-- 删除按钮 -->
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.chat_id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    </div>
</template>
<script>
export default {
    data(){
        return{
            userlist:[],
            searchQuery:'', // 搜索
            // 控制修改用户对话框的显示与隐藏
            editDialogVisible: false,
            editForm:[]
        }
    },
    created(){
        this.getUserList();
    },
    methods:{
        async getUserList() {
        const { data: res } = await this.$http.get('getAllChat');
        // if (res.meat.status !== 200) return this.$message.error(res.meta.msg)
        this.userlist = res.list
        console.log(res.list)
      },
   
  
      // 删除
      // 根据Id删除对应的用户信息
    async removeUserById(chat_id) {
      // 弹框询问用户是否删除数据
      const confirmResult = await this.$confirm(
        '此操作将会删除该条反馈, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)

      // 如果用户确认删除，则返回值为字符串 confirm
      // 如果用户取消了删除，则返回值为字符串 cancel
      // console.log(confirmResult)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }

      const { data: res } = await this.$http.get('delChat',{params:{
        chat_id
      }})
      console.log(res.data)
      this.$message.success('删除评论成功！')
      this.getUserList()
    },

       // 搜索
    async getUserSearch(){
       const { data: res } = await this.$http.get('searchName',{params:{
        name:this.searchQuery
      }})
      console.log(res.data)
      this.userlist = res.data
      },

      async quchong(){
       const { data: res } = await this.$http.get('quChong')

      console.log(res.data)
      // this.userlist = res.data
      },

    }
}
</script>
<style lang="less" scoped>

</style>